<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'add.jsp' starting page</title>
    
   	<link href="<%=request.getContextPath() %>/css/add.css" type="text/css" rel="stylesheet">
	  <script src="/js/jquery-3.7.1.js" type="text/javascript"></script>
	  <script type="text/javascript">
		  $(function () {
			  $("[name = name]").blur(function () {
			  // 获取用户名
			  var value = $("[name = name]").val();
			  // 发出ajax请求
				  $.ajax({
					  url:"/user/checkName",
					  data:{"name": value},
					  type: "post",
					  dataType: "json",
					  success:function (data) {
						  if (data) {
							  $("#mySpan").html("<img src='/img/no.png'>用户名已经存在");
						  }else{
							  $("#mySpan").html("<img src='/img/ok.png'>");
						  }
					  }
				  });
			  })
		  })
	  </script>
  </head>
  
  <body>
  	<div id="up">
	   <ul>
	    	<li><span><a href="#">用户管理 </a>&gt; 添加用户 &gt;</span></li>
	   </ul>
	</div>
	<div id="down">
	    <form method="post" action="/user/addUser">
	   		<table width="800px">
	   			<tr>
	   				<td>用户名称：</td>
	   				<td><input type="text" name="name" class="in"/><span id="mySpan"></span></td>
	   			</tr>
	   			<tr>
	   				<td>用户密码：</td>
	   				<td><input type="text" name="password" class="in"/></td>
	   			</tr>
	   			<tr>
	   				<td>年龄：</td>
	   				<td><input type="number" name="age" class="in"/></td>
	   			</tr>
				<tr>
					<td>生日：</td>
					<td><input type="date" name="birthday" class="in"/></td>
				</tr>

	   			<tr>
	   				<td>用户角色</td>
	   				<td>
	   					<select name="rid" class="in">
							<c:forEach items="${list}" var="role">
								<option value="${role.rid}">${role.roleName}</option>
							</c:forEach>
	   					</select>
	   				</td>
	   			</tr>
	   			
	   			<tr>
	   				<td></td>
	   				<td>
	   					<input type="submit" value="提&nbsp;&nbsp;&nbsp;交" class="su">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	   					<input type="reset" value="清&nbsp;&nbsp;&nbsp;空" class="su">
	   				</td>
	   			</tr>
	   		</table>
	    </form>
    </div>
  </body>
</html>
